<template>
  <el-form :model="invoiceForm" class="shadow">
    <el-tabs
      type="border-card"
      :closable="isClosable"
      v-model="editableTabsValue"
      @tab-remove="handleTabsEdit"
    >
      <el-tab-pane
        v-for="(items, i) in invoiceForm"
        :key="items.name"
        :label="items.title"
        :name="items.name"
        style="padding: 12px"
      >
        <template #label>
          发票信息{{ i || '' }}
          <div v-show="isUpdate">
            <vab-icon
              icon="file-copy-2-line"
              style="margin-right: 4px; margin-left: 8px"
              @click="handleAddTab('copy', i)"
            />
            <vab-icon icon="add-box-line" @click="handleAddTab('create')" />
          </div>
        </template>

        <el-row :gutter="24">
          <template v-for="(item, index) in cloums">
            <el-col v-if="isUpdate" :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
              <el-form-item :prop="invoiceForm[i][item.prop]">
                <template #label>
                  <i class="required_text">*</i>
                  {{ item.label }}
                </template>
                <VabInputForm
                  v-if="item.type == 'input'"
                  v-model.trim="invoiceForm[i][item.prop]"
                />
                <VabSelectForm
                  v-if="item.type == 'select'"
                  class="width_100"
                  v-model.trim="invoiceForm[i][item.prop]"
                />
                <el-cascader
                  clearable
                  class="width_100"
                  :disabled="item.disabled"
                  :options="addressOptions"
                  v-if="item.type == 'address'"
                  v-model.trim="invoiceForm[i][item.prop]"
                  :props="{ value: 'name', label: 'name' }"
                />

                <el-radio-group
                  v-model.trim="invoiceForm[i][item.prop]"
                  v-if="item.type == 'radio'"
                >
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="0">否</el-radio>
                </el-radio-group>
                <span
                  class="error"
                  v-if="!IsValueHave(invoiceForm[i][item.prop])"
                >
                  {{ `${item.label}不能为空！` }}
                </span>
              </el-form-item>
            </el-col>

            <!-- 默认值 -->
            <el-col v-else :xs="24" :sm="12" :md="12" :xl="8">
              <div class="detail-mode">
                <span class="label">{{ item.label }}</span>
                <span class="text" :title="_FieldFormat(item, i)">
                  {{ _FieldFormat(item, i) }}
                </span>
              </div>
            </el-col>
          </template>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </el-form>
</template>
<script lang="ts" setup>
  defineOptions({
    name: 'AddInvoiceMode',
  })
  /**
   * @import
   */
  import { ref } from 'vue'
  import { FieldFormat, IsValueHave } from '~/src/utils/utils'
  import { invoiceInfoCloums } from './means'
  import _ from 'lodash'
  /**
   * @var
   */
  const props = defineProps({
    askType: {
      type: String,
      default: 'default',
    },
    addressOptions: {
      type: Array,
      default: [],
    } as any,
    // 是否显示 统一社会信用
    isShowCode: {
      type: Boolean,
      default: true,
    },
  })
  const invoiceForm = ref<any>([{}])
  const editableTabsValue = ref()

  const cloums = props.isShowCode
    ? invoiceInfoCloums
    : invoiceInfoCloums.filter((item: any) => {
        if (item.prop != 'socialcre_code') return item
      })

  /**
   * @method
   */
  // 添加 复制  节点
  const handleAddTab = (type: string, i = 0) => {
    const times = new Date().getTime()

    const _Array = _.cloneDeep(invoiceForm.value)
    if (type == 'copy') {
      invoiceForm.value.splice(i + 1, 0, {
        ..._Array[i],
        name: `${times}`,
      })
    }
    if (type == 'create') {
      invoiceForm.value.push({
        name: `${times}`,
      })
    }
  }
  // 删除
  const handleTabsEdit: any = (i: any, action: any) => {
    invoiceForm.value = invoiceForm.value.filter((item: any) => {
      if (item.name != i) return item
    })

    //默认选中第一条
    editableTabsValue.value = invoiceForm.value[0].name
  }

  // 字段级格式化
  const _FieldFormat = (row: any, i: number) => {
    if (row.prop == 'is_default_invoice') {
      return invoiceForm.value[i][row.prop] == 0 ? '否' : '是'
    }
    return FieldFormat(invoiceForm.value[i][row.prop])
  }

  /**
   * @method
   */

  //更新数据
  const updateData = ({ invoice }: any) => {
    invoiceForm.value = invoice.map((item: any, i: number) => {
      return {
        ...item,
        name: `${i}`,
      }
    })
    // 默认选中第一个
    editableTabsValue.value = invoiceForm.value[0].name
  }
  //重置数据
  const resetData = () => {
    const times = new Date().getTime()
    invoiceForm.value = [{ name: `${times}` }]
    editableTabsValue.value = `${times}`
  }

  /**
   * @实例
   */
  // 是否是更新状态
  const isUpdate = computed(() => {
    if (props.askType != 'default') return true
    return false
  })
  // 是否显示删除按钮
  const isClosable = computed(() => {
    if (invoiceForm.value.length > 1 && isUpdate.value) return true
    return false
  })

  defineExpose({
    invoiceForm,
    updateData,
    resetData,
  })
</script>
<style lang="scss" scoped>
  @import './means.scss';
</style>
